<template>
  <div class="box1">
    <header class="header">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
       
      >
        <template #left>
          <van-icon name="arrow-left" size="20" @click="$router.back()" />
        </template>
        <template #action>
          <van-icon name="bars" size="20" />
        </template>
      </van-search>
    </header>
    <main class="content">
      <van-grid>
        <van-grid-item text="综合" />
        <van-grid-item text="销量" />
        <van-grid-item text="价格" />
        <van-grid-item text="筛选" />
      </van-grid>
      <van-grid class="ora">
        <van-grid-item text="家电" class="ora" />
        <van-grid-item text="苏宁服务" class="ora" />
        <van-grid-item text="苏紫霞啊" class="ora" />
        <van-grid-item text="品牌" class="ora" />
      </van-grid>

      <!--商品列表展示区-->
       <!--空状态-->    <!--v-if控制是否展示列表或空状态-->
      <van-empty :image="require('../../img/8.jpg')" description="没有找到相关商品" v-if="list.length==0"/>
      <div v-for="item in list" :key="item.id" v-else>
        <!--商品卡片-->
        <van-card
          :price="item.price"
          :title="item.title"
          :thumb="item.image"
        />
      </div>
    </main>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import { ref, onMounted } from "vue";
const list = ref([]);
const value=ref('')
const query=()=>{
    //搜索请求
  request.get('/search',{
    params:{
        value:value.value
    }
   }).then((res) => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
}

//搜索
const onSearch=()=>{
    query()
}

//监听
onMounted(()=>{
    query()
})
</script>



<style lang="scss" >
.ora {
  background: #f9590e;
}
</style>